import {Button, Descriptions, Flex, Modal, Tag} from "antd";
import React from "react";
import {API} from "@/services/typings";


interface OperLogDetialProps {
  operLog: API.IOperLog;
  visible: boolean;
  onClose: () => void;
}

const OperLogDetial: React.FC<OperLogDetialProps> = ({visible, operLog, onClose}) => {
  const businessTypeMap = {
    0: '其它',
    1: '新增',
    2: '修改',
    3: '删除'
  };

  // 操作类别映射
  const operatorTypeMap = {
    0: '其它',
    1: '后台用户',
    2: '手机端用户'
  };

  // 状态映射
  const statusMap = {
    0: '正常',
    1: '异常'
  };

  return <Modal
    visible={visible}
    footer={null}
    width={1000}
    bodyStyle={{padding: 0}}
    onClose={onClose}
    closeIcon={false}
  >
    <Flex justify={'end'}>
      <Button onClick={onClose} type={"primary"}>关闭</Button>
    </Flex>

    <Descriptions
      title="操作日志详情"
      size={'small'}
      column={2}
      bordered
      labelStyle={{width: '120px', fontWeight: 'bold'}}
    >
      <Descriptions.Item label="日志ID">{operLog.id}</Descriptions.Item>
      <Descriptions.Item label="模块标题">{operLog.title}</Descriptions.Item>

      <Descriptions.Item label="业务类型">
        {businessTypeMap[operLog.businessType as keyof typeof businessTypeMap]}
      </Descriptions.Item>
      <Descriptions.Item label="操作方法">{operLog.method}</Descriptions.Item>

      <Descriptions.Item label="请求方式">{operLog.requestMethod}</Descriptions.Item>
      <Descriptions.Item label="操作类别">
        {operatorTypeMap[operLog.operatorType as keyof typeof operatorTypeMap]}
      </Descriptions.Item>

      <Descriptions.Item label="操作人员">{operLog.operName}</Descriptions.Item>

      <Descriptions.Item label="请求地址" span={2}>
        {operLog.operUrl}
      </Descriptions.Item>

      <Descriptions.Item label="客户端IP">{operLog.operIp}</Descriptions.Item>
      <Descriptions.Item label="操作地点">{operLog.operLocation}</Descriptions.Item>

      <Descriptions.Item label="请求参数" span={2}>
        <pre style={{margin: 0, maxHeight: '200px', overflow: 'auto'}}>
          {operLog.operParam}
        </pre>
      </Descriptions.Item>

      <Descriptions.Item label="返回结果" span={2}>
        <div style={{
          width: '100%',
          overflow: 'hidden'
        }}>
            <pre style={{
              margin: 0,
              maxHeight: '120px',
              overflow: 'auto',
              whiteSpace: 'pre-wrap',
              wordBreak: 'break-word',
              background: '#f5f5f5',
              padding: '12px',
              borderRadius: '4px',
              fontSize: '13px',
              lineHeight: '1.5',
              display: 'inline-block', // 关键属性
              minWidth: '100%' // 防止内容过短时收缩
            }}>
              {operLog.jsonResult}
            </pre>
        </div>
      </Descriptions.Item>

      <Descriptions.Item label="操作状态">
        {statusMap[operLog.status as keyof typeof statusMap]}
      </Descriptions.Item>
      <Descriptions.Item label="耗时(ms)">{operLog.costTime}</Descriptions.Item>

      {operLog.errorMsg && (
        <Descriptions.Item label="错误信息" span={2}>
          {operLog.errorMsg}
        </Descriptions.Item>
      )}

      <Descriptions.Item label="操作时间">
        {new Date(operLog.operTime).toLocaleString()}
      </Descriptions.Item>
    </Descriptions>
  </Modal>
}

export default OperLogDetial
